<!--状态-->
<template>
  <component>
    <div class='row'>
      <div class='col-4'>
        <template v-if='water'>
          <q-img class='logo' src="kungfu/waterd.png" />
          <div class='font'>
            排除泡水车
          </div>
        </template>
        <template v-else>
          <q-img class='logo' src="kungfu/water.png" />
          <div class='font'>
            泡水车
          </div>
        </template>
      </div>
      <div class='col-4'>
        <template v-if='fire'>
          <q-img class='logo' src="kungfu/fired.png" />
          <div class='font'>
            排除火烧车
          </div>
        </template>
        <template v-else>
          <q-img class='logo' src="kungfu/fire.png" />
          <div class='font'>
            火烧车
          </div>
        </template>
      </div>
      <div class='col-4'>
        <template v-if='crash'>
          <q-img class='logo' src="kungfu/crashed.png" />
          <div class='font'>
            排除事故车
          </div>
        </template>
        <template v-else>
          <q-img class='logo' src="kungfu/crash.png" />
          <div class='font'>
            事故车
          </div>
        </template>
      </div>
    </div>
  </component>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent ({
  name: 'Status',
  props: {
    water: {
      type: Boolean,
      required: true
    },
    fire: {
      type: String,
      required: true
    },
    crash: {
      type: String,
      required: true
    }
  },
});
</script>

<style scoped lang='sass'>
.font
  font-weight: bold
//顶部条幅与标题样式
@mixin img($size)
  .q-img
    width: $size
//桌面页面样式
@media screen and (min-device-width: 960px)
  @include img($size: 6em)

//移动页面样式
@media screen and (max-device-width: 960px)
  @include img($size: 8em)
</style>
